import { Dropdown } from 'antd';
import type { DropDownProps } from 'antd/es/dropdown';
import React from 'react';
import { useEmotionCss } from '@ant-design/use-emotion-css';
import classNames from 'classnames';

//& 表示类型合并 但是排除了overlay属性
export type HeaderDropdownProps = {
    overlayClassName?: string;
    placement?: 'bottomLeft' | 'bottomRight' | 'topLeft' | 'topCenter' | 'topRight' | 'bottomCenter'|'bottom';
} & Omit<DropDownProps, 'overlay'>;

const HeaderDropdown: React.FC<HeaderDropdownProps> = ({ overlayClassName: cls, ...restProps }) => {
    const className = useEmotionCss(({ token }) => {
        return {
            [`@media screen and (max-width: ${token.screenXS})`]: {
                width: '100%',
            },
        };
    });
    return <Dropdown trigger={['click']} overlayClassName={classNames(className, cls)} {...restProps}/>;
};

export default HeaderDropdown;
